Preparando o Ambiente de Desenvolvimento

Introdução

Os computadores não compreendem diretamente as linguagens de programação; elas precisam ser convertidas para a linguagem de máquina, composta apenas por 0s e 1s (binário), que é a única linguagem que o computador entende. Dependendo da linguagem de programação, essa conversão pode ser feita por meio de compilação ou interpretação.

Linguagens de programação compiladas traduzem o código-fonte para código de máquina antes da execução do programa. Um compilador realiza essa conversão, gerando instruções diretamente compreensíveis pela arquitetura da máquina alvo. Isso resulta em uma execução mais eficiente e rápida, pois as instruções já foram processadas e otimizadas antes da execução.

Por outro lado, linguagens de programação interpretadas traduzem o código-fonte para código de máquina durante a execução. Um interpretador analisa o código linha por linha, tornando o processo mais lento em comparação com a compilação. No entanto, a interpretação oferece maior portabilidade, permitindo a execução do mesmo código-fonte em diferentes sistemas operacionais e arquiteturas, desde que haja um interpretador disponível.

diferença entre compilador e interpretador

Algumas linguagens, como Python e JavaScript (JS), usam uma abordagem intermediária. O código-fonte é compilado para bytecode, uma representação binária das instruções que uma máquina virtual específica pode entender. Em seguida, a máquina virtual executa o bytecode, proporcionando portabilidade e eficiência sem a necessidade de interpretar o código linha por linha.

arquivo de texto para arquivo de bytecode

O bytecode permite a aplicação da técnica de compilação Just-In-Time (JIT), que ocorre durante a execução do bytecode. Um compilador JIT traduz partes do código em código de máquina otimizado para a arquitetura específica do computador, melhorando significativamente o desempenho. Esse código de máquina é armazenado em cache para reutilização em futuras execuções do mesmo trecho de código, evitando a necessidade de recompilação repetitiva.

A compilação JIT também permite que a linguagem de programação forneça uma combinação de portabilidade e eficiência, pois o mesmo código-fonte pode ser executado em diferentes plataformas, mas o compilador JIT pode gerar código de máquina otimizado para cada plataforma específica.

A Linguagem de Programação JavaScript

Para este curso, utilizaremos a linguagem de programação JavaScript. JavaScript é amplamente popular por sua flexibilidade e diversidade de aplicações, como desenvolvimento de websites, aplicativos móveis e desktop. No desenvolvimento de websites, o JavaScript pode ser usado tanto do lado do cliente (navegadores) quanto do lado do servidor (Node.js), o que o torna uma ferramenta poderosa para desenvolvimento de software moderno.

Executando JavaScript via Navegador Web

As páginas web utilizam HTML, CSS e JavaScript. Navegadores modernos já vêm com um interpretador de JavaScript embutido. Para executar códigos JavaScript, acesse as Ferramentas do Desenvolvedor do seu navegador (na maioria dos navegadores, use a tecla F12) e abra a aba "Console". Esta aba é um terminal interativo para inserir e executar comandos JavaScript.

Exemplo HTML + JavaScript

Podemos criar uma página web simples com código HTML e Javascript e abri-la no navegador para ver o código executando:

<input type="number" placeholder="Digite um número">
<input type="number" placeholder="Digite outro número">
<button onclick="somar()">Somar!</button>
<p></p>
<script>
    function somar() {
        document.querySelector("p").textContent =
            Number(document.querySelectorAll("input")[0].value) +
            Number(document.querySelectorAll("input")[1].value)
    }
</script>

Instalando o Ambiente de Desenvolvimento JavaScript

Instalando

Para desenvolver em JavaScript, vamos utilizar os seguintes programas:

Para instalar os programas, você precisará de privilégios administrativos. Siga as instruções da seção correspondente ao teu sistema operacional:

Linux

Por fazer

Windows

Siga uma das seguintes alternativas:

  • Alternativa 1 (fácil)

    • Execute o seguinte comando no terminal como administrador:

    Set-ExecutionPolicy RemoteSigned -Scope Process -Force; Invoke-Expression ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/pedrosiqueira/ifmsjs/refs/heads/main/scripts/01_windows_setup.ps1'))

    Esse comando executa o script de instalação dos programas para desenvolvimento de Javascript, além de configurar algumas variáveis de ambiente que esses programas utilizam. Quando solicitado, confirme a execução do script. Se você ficou curioso, pode clicar nesse link e ver o que o script faz.

    Observação: No Windows, o script também instala o Chocolatey (choco): Gerenciador de pacotes para Windows que facilita a instalação de softwares. Ele funciona de maneira similar ao npm, permitindo instalar programas de forma rápida e automatizada.

  • Alternativa 2 (difícil)

    • Instale o Windows Subsystem for Linux (WSL) seguindo as instruções disponíveis aqui. Depois, siga o tutorial de instalação do NodeJS para Windows disponível aqui.

    Configurando o Ambiente de Desenvolvimento JavaScript

    Após a instalação dos programas, vamos configurá-los para otimizar nosso ambiente de desenvolvimento.

    Para o git, vamos definir um nome de usuário e email para podermos salvar "snapshots" do progresso do projeto. Recomendamos criar uma conta no GitHub, onde nosso projeto será hospedado, e usá-la na configuração do git.

    Observação: O GitHub é uma plataforma de hospedagem de código-fonte e controle de versão colaborativa, baseada no sistema Git. Ele é usado principalmente por desenvolvedores para armazenar, gerenciar e compartilhar seus projetos de código de maneira eficiente, facilitando o trabalho em equipe em projetos de software. No GitHub, os desenvolvedores podem criar repositórios onde armazenam seus arquivos de código, além de utilizar ferramentas integradas para controle de versões, como o Git, que permite rastrear mudanças, fazer “commits” (gravações de mudanças), e colaborar com outros desenvolvedores.

    Para o vscode, vamos instalar as seguintes extensões para nos auxiliar no desenvolvimento do projeto:

    Além disso, vamos trocar o npm pelo pnpm, uma alternativa mais rápida e leve ao npm. Os comandos do pnpm, se não idênticos, são similares aos do npm. Para saber mais sobre as diferenças entre os comandos, podemos acessar aqui.

    Para facilitar o processo de configuração, execute um dos seguintes scripts, conforme teu sistema operacional:

    Linux

    Por fazer

    Windows

    Invoke-Expression ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/pedrosiqueira/ifmsjs/refs/heads/main/scripts/02_alg_project_setup.ps1'))

    Esse script também baixa o esqueleto inicial do nosso projeto do GitHub e o abre no vscode.

    Conhecendo nosso projeto

    De início, o projeto vem com dois arquivos de configuração. O arquivo .vscode/launch.json possui configurações do vscode para o projeto, como como compilá-lo e executá-lo. O arquivo package.json possui configurações do node para o projeto, como o nome dos autores do projeto, descrição do projeto, e pacotes de terceiros utilizados pelo projeto.

    O projeto também vem com a pasta node_modules, onde ficam os pacotes de terceiros. No momento o único pacote que utilizaremos é o scanf, que nos auxilia a ler dados digitados pelo usuário.

    ATENÇÃO: Você nunca deve mexer na pasta node_modules! Ela é gerenciada automaticamente pelo npm.

    Criando nosso primeiro script

    É fundamental mantermos nosso projeto organizado. Estruturaremos nosso projeto por pastas. Criaremos uma pasta para cada capítulo, onde colocaremos os códigos desenvolvidos naquele capítulo. Como estamos no segundo capítulo, crie a pasta cap02 na pasta raiz do projeto. Você pode fazer isso no vscode clicando com o botão direito no espaço vazio da aba de explorador e selecionando "New folder...".

    Agora, crie o arquivo hello-world.js dentro da pasta cap02. Você pode fazer isso no vscode clicando com o botão direito em cima da pasta cap02 e selecionando "New file...". Observe que todos os arquivos de código-fonte em JavaScript devem terminar com a extensão .js.

    Escreva o código console.log('hello, world!') dentro do arquivo recém-criado. Para executar esse arquivo, abra o terminal na pasta raiz do projeto (atalho Ctrl+j) e execute node cap02/hello-world.js. Parabéns, esse é seu primeiro programa em JavaScript!

    Você também pode executar qualquer arquivo .js aberto no vscode simplesmente teclando F5.

    Debugging

    Errar faz parte do processo de aprendizagem, especialmente na programação. No entanto, às vezes é difícil encontrar a fonte de um erro no código. É aí que entra a arte de debugging. Debugging, ou depuração de código, é o processo de identificar, isolar e corrigir erros em um programa de computador. Quando um programa apresenta comportamentos inesperados, é necessário depurar o código para encontrar e resolver o problema. Isso envolve pausar a execução do programa, observar variáveis e valores em diferentes pontos do código e identificar onde ocorrem os erros. O debugging também é útil para entender o funcionamento do programa, permitindo que você o execute passo a passo, no seu próprio ritmo.

    Crie o arquivo cap02/factorials.js com o seguinte código:

    function calculateSumOfFactorials(argument1, argument2) {
    let factorial1 = calculateFactorial(argument1);
    let factorial2 = calculateFactorial(argument2);
    let result = calculateSum(factorial1, factorial2);
    return result;
}

function calculateFactorial(argument) {
    let factorialResult = 1;
    for (let i = 1; i <= argument; i++) {
        factorialResult *= i;
    }
    return factorialResult;
}

function calculateSum(argument1, argument2) {
    return argument1 + argument2;
}

let a = 5;
let b = 10;
let sumOfFactorials = calculateSumOfFactorials(a, b);
console.log("The sum of factorials of the entered integers is", sumOfFactorials);

    Observação: as barras em um caminho de arquivo significam as pastas onde o arquivo se encontra. Portanto, cap02/factorials.js significa que o arquivo factorials.js está dentro da pasta cap02.

    Veja se você consegue entender o que esse código está fazendo. Agora, antes de executá-lo de uma vez, experimente colocar um breakpoint na linha 20.

    Dentre as opções de depuração no vscode, você pode continuar a execução até o próximo breakpoint (F5), avançar (F10), entrar (F11), sair (Shift + F11).

    Na aba de depuração, você pode ver os valores das variáveis atuais, definir observadores (watch) de variáveis ou expressões, consultar a pilha de chamadas de funções e os breakpoints.

    Na aba "Debug Console", você pode escrever linhas de códigos que são executadas no contexto do programa atual, com acesso às suas variáveis e funções.

    No momento, essas informações podem parecer abstratas se você ainda está no início de sua jornada como programador. No entanto, depurar é uma ferramenta essencial para programadores e, à medida que você aprender mais, tudo ficará mais claro e fará mais sentido. Por isso, convido você a revisitar essa seção após adquirir mais maturidade em programação. Com o tempo e o conhecimento adquirido, essas práticas e termos farão mais sentido e serão uma parte natural do teu fluxo de trabalho como desenvolvedor.